@import 'common.sass'

.profile-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(32)
            display: flex
            align-items: center
            color: $title_color

    .image-box
        width: vw(750)
        height: vw(250)
        background-image: url("images/group/power.png")
        background-size: 100% 100%
        background-position: center center

    .content-box
        width: vw(700)
        height: auto
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        text-indent: 2em
        color: $title_color
        font-size: vw(24)
        line-height: vw(48)

        .line
            width: vw(700)
            height: auto

$total_container_width: 650
$split_line_width: 4

$point_r: $split_line_width / 2
$icon_width: 16
$box_width: 290
$point_1_top: 90 + 18
$point_2_top: 250 + 18 
$point_3_top: 480 + 18
$point_4_top: 730 + 18
$point_5_top: 860 + 18
$point_6_top: 1100 + 18

$title_font_size: 28
$title_font_weight: 700
$p_margin_top_and_bottom: 5

.total-container
    width: vw(750)
    height: vw(1250)
    display: flex
    justify-content: center

    .total-box
        width: vw($total_container_width)
        height: vw(1250)
        display: flex
        justify-content: space-between

        .halt-box
            width: vw(($total_container_width - $split_line_width) / 2)
            height: 100%

        .split-line
            width: vw($split_line_width)
            height: vw(1250)
            position: relative
            display: flex
            flex-direction: column
            justify-content: flex-start

            .v-blank
                height: vw(120)

            .line-color
                width: vw($split_line_width)
                height: vw(1000)
                background-color: rgba(30, 155, 177, 0.2)

            .title
                width: vw(220)
                height: vw(30)
                line-height: vw(30)
                font-size: vw(24)
                background-color: $brand_main_color
                color: white
                text-align: center

            .content-box
                font-size: vw(24)
                line-height: vw(48)
                .p
                    margin: vw($p_margin_top_and_bottom) auto

            .point
                width: vw($point_r * 2)
                height: vw($point_r * 2)
                position: absolute
                left: 0

                .icon
                    width: vw($icon_width)
                    height: vw($icon_width)
                    border-radius: vw($icon_width)
                    position: absolute
                    background-color: $brand_main_color
                    left: vw($point_r - $icon_width / 2)

                    .shadow-inner
                        width: vw(26)
                        height: vw(26)
                        position: absolute
                        top: vw(-5)
                        left: vw(-5)
                        background-color: rgba(30, 155, 177, 0.2)
                        border-radius: vw(26)

                    .shadow-outer
                        width: vw(36)
                        height: vw(36)
                        top: vw(-10)
                        left: vw(-10)
                        position: absolute
                        background-color: rgba(30, 155, 177, 0.1)
                        border-radius: vw(36)

            .box-origin
                display: flex
                flex-direction: column
                justify-content: flex-start
                width: vw($box_width)
                height: auto
                position: absolute

            .point-1
                top: vw($point_1_top)
                .box
                    @extend .box-origin
                    align-items: flex-end
                    text-align: right
                    top: vw(0 - 60 - 33)
                    left: vw(0 - $icon_width - $box_width - (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)

            .point-2
                top: vw($point_2_top)
                .box
                    @extend .box-origin
                    align-items: flex-start
                    text-align: left
                    top: vw(0 - 60 - 33)
                    left: vw($icon_width + (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)

            .point-3
                top: vw($point_3_top)
                .box
                    @extend .box-origin
                    align-items: flex-end
                    text-align: right
                    top: vw(0 - 130 - 33)
                    left: vw(0 - $icon_width - $box_width - (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)

            .point-4
                top: vw($point_4_top)
                .box
                    @extend .box-origin
                    align-items: flex-start
                    text-align: left
                    top: vw(0 - 160 - 33)
                    left: vw($icon_width + (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)

            .point-5
                top: vw($point_5_top)
                .box
                    @extend .box-origin
                    align-items: flex-end
                    text-align: right
                    top: vw(0 - 40 - 33)
                    left: vw(0 - $icon_width - $box_width - (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)

            .point-6
                top: vw($point_6_top)
                .box
                    @extend .box-origin
                    align-items: flex-end
                    text-align: right
                    top: vw(0 - 30 - 33)
                    left: vw(0 - $icon_width - $box_width - (($total_container_width - $split_line_width) / 2 - $box_width ) / 2)
